<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="/js/layui/layui.js"></script>
</head>

<body>
    <div class="container">
        <ul class="menulist cityList">
            <li>城市：</li>
            <li class="item active">全部</li>
        </ul>
        <ul class="menulist typeList">
            <li>类型：</li>
            <li class="item active">全部</li>
        </ul>
        <ul class="showlist">
        </ul>
        <div id="pagerContainer">

        </div>
    </div>
    <script id="cityList" type="text/html">
        {{each $data item i }}
        <li data-id="{{item.id}}" class="item">{{item.name}}</li>
        {{/each}}
    </script>
    <script id="mainmes" type="text/html">
        {{each $data item i }}
        <li>
            <img src="{{item.img}}" alt="">
            <div class="content">
                <div class="top">
                    <a href="detail.html?id={{item.id}}">
                        <div>【{{item.city}}】 {{item.title}}</div>
                    </a>
                    <div class="font14 grey">艺人：{{item.artist}}</div>
                    <div class="font14 grey">{{item.city}} | {{item.address}}</div>
                    <div class="font14 grey">{{item.time | settime}}</div>
                </div>
                <div class="bottom ">
                    <div class="purple" style="font-weight:bold">
                        {{item.price|formatPrice}} 元
                    </div>
                    <div class="font14 grey">
                        {{item.state | formatState}}
                    </div>
                </div>
            </div>
        </li>
        {{/each}}
    </script>
    <script src="js/conmmon.js"></script>
    <script src="js/art-template.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script src="http://www.jq22.com/demo/paging201904152156/js/pageMe.js"></script>
    <script>
        $(function () {


            if (!$.cookie("username")) {
                layer.msg("请先登录", {
                    icon: 5,
                    time: 1000
                }, function () {
                    location.href = "login.html"
                })
            }


            template.defaults.imports.formatPrice = function (price) {
                price.sort(function (x, y) {
                    return x - y
                })
                return `${price[0]}-${price[price.length-1]}`
            }
            template.defaults.imports.formatState = (state) => {
                switch (state) {
                    case 0:
                        return "售票中"
                    case 1:
                        return "售罄"
                    case 2:
                        return "待开票"
                    default:
                        return "未知"
                }
            }
            template.defaults.imports.settime = (time) => {
                var str = "日一二三四五六"
                var week = str[new Date(time).getDay()]
                return time + " 周" + week
            }
            // console.log(JSON.stringify(showList))//转为JSON字符串
            // JSON.parse()//JSON字符串转对象
            var initShowListDom = (pageIndex = 1, pageSize = 3) => {
                var cityid = $(".cityList li.item.active").data("id")
                var typeid = $(".typeList li.item.active").data("id")
                $.get("https://www.easy-mock.com/mock/5ceca555341d0c71bf7128f8/show", {
                    cityid,
                    typeid,
                    pageSize,
                    pageIndex
                }, function (data) {
                    var result = data.data

                    $(".showlist").empty()
                    $(".showlist").append(template("mainmes", result))
                })
            }

            initShowListDom()


            $.get(`https://www.easy-mock.com/mock/5ceca555341d0c71bf7128f8/getPageCount`, (data) => {

                layui.use('laypage', function () {
                    var laypage = layui.laypage;
                    //执行一个laypage实例
                    laypage.render({
                        elem: 'pagerContainer',
                        count: 50,
                        limit: 3,
                        jump: function (obj, first) {
                            //obj包含了当前分页的所有参数，比如：
                            //首次不执行
                            if (!first) {
                                initShowListDom(obj.curr, obj.limit)
                            }
                        }
                    });
                });

            })

            var initMenuList = (arr, container) => {
                $(container).append(template("cityList", arr))
                // $(container + " li.item").first().addClass("active")
                $(container + " li.item").click(function () {
                    $(this).addClass("active").siblings(".active").removeClass("active")
                    initShowListDom()
                })
            }
            $.get("https://www.easy-mock.com/mock/5cecac40ca1d920b83f13ea8/mock/cityList", function (data) {
                initMenuList(data.cityList, ".cityList")
            })
            $.ajax({
                url: "https://www.easy-mock.com/mock/5cecac40ca1d920b83f13ea8/mock/typeList",
                success: function (data) {
                    initMenuList(data.typeList, ".typeList")
                }
            })






        })
        // Dom元素如果是动态生成的就用on
    </script>
</body>

</html>